<template>
 <div id="cascade">
   <el-dialog :title="title" :visible="visible" :before-close="handleClose" :width="width">
     <!-- <div class="panel">
       <div><span class="p_lab">跨表单联动:</span><el-switch v-model="isAccross"></el-switch></div>
       <div><span class="p_lab">增加联动:</span><i class="el-icon-circle-plus plus"></i></div>
     </div> -->
     <div class="panel between">
       <div class="panel_box">
         <span class="p_lab">当前位置:</span>
         <el-cascader disabled filterable change-on-select v-model="editForm" :size="'mini'" :options="forms">
         </el-cascader>
       </div>
       <div class="panel_box">
         <span class="p_lab">关联位置:</span>
         <el-cascader @change="change" filterable change-on-select v-model="nextForm" :size="'mini'" :options="forms">
         </el-cascader>
       </div>
     </div>
     <div class="panel" v-if="indexCom && indexCom.items && indexCom.items.length">
       <div class="panel_box">
         <el-radio-group v-model="indexConcat">
           <el-radio v-for="(v, k) in indexCom.items" :key="k" :label="v['attrs'].value">{{v['attrs'].label}}</el-radio>
         </el-radio-group>
       </div>
       <listbox :list="forms" v-model="formChosed" :title="'表单列表'"></listbox>
       <listbox v-if="formChosed && formChosed.length > 0" :list="formChosedActive.children" v-model="comChosed" :title="`${formChosedActive.label}组件`"></listbox>
       <listbox v-if="comChosed && comChosed.length > 0" :list="comChosedActive.children" v-model="itemChosed" :title="`${comChosedActive.label}子项`"></listbox>
     </div>
     <p slot="footer" class="dialog-footer">{{openedList}}
       <el-button ref="btn" @click="closeDialog">关闭</el-button>
       <el-button type="primary" @click="save">保存</el-button>
     </p>
   </el-dialog>
 </div>
</template>

<script>
/**
 * @author 'yejinbo'
 * @description `原来是设置级联规则的，现在已无用`
 */
import _S from '@/config/s'
import listbox from 'com/listbox'
export default {
  data () {
    return {
      isAccross: false,
      editForm: [],
      nextForm: [],
      formChosed: [],
      itemChosed: [],
      comChosed: [],
      forms: [
        {
          label: '表单A',
          value: 'formA',
          business: 'test',
          children: [
            {
              label: '组件A',
              value: 'formA-comA',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formA-comA-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formA-comA-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formA-comA-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件C',
              value: 'formA-comC',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formA-comC-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formA-comC-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formA-comC-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件B',
              value: 'formA-comB',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formA-comB-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formA-comB-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formA-comB-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件D',
              value: 'formA-comD',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formA-comD-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formA-comD-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formA-comD-C',
                  business: 'test'
                }
              ]
            }
          ]
        },
        {
          label: '表单B',
          value: 'formB',
          business: 'test',
          children: [
            {
              label: '组件B',
              value: 'formB-comB',
              business: 'test',
              children: [
                {
                  label: '子项3',
                  value: 'formB-comB-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formB-comB-B',
                  business: 'test'
                },
                {
                  label: '子项1',
                  value: 'formB-comB-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件A',
              value: 'formB-comA',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formB-comA-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formB-comA-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formB-comA-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件C',
              value: 'formB-comC',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formB-comC-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formB-comC-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formB-comC-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件E',
              value: 'formB-comE',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formB-comE-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formB-comE-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formB-comE-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件D',
              value: 'formB-comD',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formB-comD-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formB-comD-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formB-comD-C',
                  business: 'test'
                }
              ]
            }
          ]
        },
        {
          label: '表单C',
          value: 'formC',
          business: 'test',
          children: [
            {
              label: '组件C',
              value: 'formC-comC',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formC-comC-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formC-comC-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formC-comC-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件B',
              value: 'formC-comB',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formC-comB-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formC-comB-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formC-comB-C',
                  business: 'test'
                }
              ]
            },
            {
              label: '组件A',
              value: 'formC-comA',
              business: 'test',
              children: [
                {
                  label: '子项1',
                  value: 'formC-comA-A',
                  business: 'test'
                },
                {
                  label: '子项2',
                  value: 'formC-comA-B',
                  business: 'test'
                },
                {
                  label: '子项3',
                  value: 'formC-comA-C',
                  business: 'test'
                }
              ]
            }
          ]
        }
      ],
      indexConcat: null,
      indexCom: null,
      indexTap: null
    }
  },
  computed: {
    formChosedActive () {
      return this.formChosed[this.formChosed.length - 1]
    },
    comChosedActive () {
      return this.comChosed[this.comChosed.length - 1]
    },
    openedList () {
      return ''
    }
  },
  watch: {
    visible (nv) {
      if (nv) {
        let indexPath = this.$store.state.indexPath
        if (!indexPath.indexTap.value || !indexPath.indexCom.mine.business) {
          _S.$emit('visible', false)
          return
        }
        this.indexTap = indexPath.indexTap
        this.indexCom = indexPath.indexCom
        this.editForm[0] = this.indexTap.value
        this.editForm[1] = this.indexCom.mine.business
      }
    }
  },
  methods: {
    closeDialog () {
      _S.$emit('visible', false)
    },
    handleClose (done) {
      this.$confirm('关闭之后将不会保存您所做的操作，是否继续?').then(_ => {
        _S.$emit('visible', false)
      }).catch(_ => {
        done(_)
      })
    },
    save () {
      _S.$emit('visible', false)
    },
    change (val) {
    }
  },
  props: {
    visible: {
      type: Boolean
    },
    title: {
      type: String
    },
    width: {
      type: String
    }
  },
  components: {
    listbox
  }
}
</script>

<style scoped lang="stylus">
#cascade
  .between
    justify-content: space-between
  .panel
    display: flex
    flex: 1
    align-items: center
    margin-bottom: 2.5rem
    & > div + div
      margin-left: 4rem
    .panel_box
      display: flex
      align-items: center
      .el-radio-group
        display: flex
        align-items: center
        flex-direction: column
        .el-radio + .el-radio
          margin-left: 0 !important
          margin-top: 4.8rem
      .p_lab
        margin-right: 1.2rem
      .plus
        color: #0ac
        cursor: pointer
        font-size: 1.2rem
</style>
